<template>
  <el-drawer
    :title="t('signup.createAccount')"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('account.account')"
          label-align="right"
          :span="2"
          >{{ formView.account }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('account.name')"
          label-align="right"
          :span="2"
        >
          {{ formView.name }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.gender')"
          label-align="right"
          :span="2"
          ><el-tag size="small" v-if="formView.gender == 1">
            {{ t("account.genderFemale") }}</el-tag
          >
          <el-tag size="small" v-if="formView.gender == 0">
            {{ t("account.genderMale") }}</el-tag
          >
          <el-tag size="small" v-if="formView.gender == 2">
            {{ t("account.genderUnknown") }}</el-tag
          ></el-descriptions-item
        >
        <el-descriptions-item
          :label="t('signup.email')"
          label-align="right"
          :span="2"
          >{{ formView.email }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('signup.reviewStatus')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" v-if="formView.status == 0">
            {{ t("signup.status0") }}</el-tag
          ><el-tag size="small" v-if="formView.status == 1">
            {{ t("signup.status1") }}</el-tag
          ><el-tag size="small" v-if="formView.status == 2">
            {{ t("signup.status2") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.description')"
          label-align="right"
          :span="2"
        >
          {{ formView.description }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../../utils/utils";
import apiAccount from "../../api/account";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

const state = reactive({
  dialogFormVisible: false,
});

const formViewOriginal = () => {
  return {
    accountSignupId: "",
    account: "",
    name: "",
    gender: 2,
    email: "",
    status: 0,
    description: "",
  };
};

const formView = reactive(formViewOriginal());

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());
  apiAccount
    .getAccountSignup(row.accountSignupId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
